<template>
  <div v-if="visible" class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center p-4">
    <div class="w-full max-w-5xl max-h-[90vh] flex flex-col">
      <!-- 弹窗头部 -->
      <div class="flex items-center justify-between px-6 py-3 bg-gray-900 text-white">
        <h3 class="text-lg font-medium" v-if="file">{{ file.name }}</h3>
        <div class="flex items-center space-x-4">
          <button
            v-if="file && file.type === 'image'"
            @click="handleDownload"
            class="text-white hover:text-gray-300 transition-colors"
            title="下载文件"
          >
            <i class="fa fa-download"></i>
          </button>
          <button
            @click="handleClose"
            class="text-white hover:text-gray-300 transition-colors"
          >
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>
      </div>
      
      <!-- 弹窗内容 - 预览区域 -->
      <div class="flex-1 overflow-hidden bg-gray-900 flex items-center justify-center">
        <div v-if="file" class="max-w-full max-h-full relative">
          <!-- 图片预览 -->
          <img
            v-if="file.type === 'image' && file.url"
            :src="file.url"
            alt="预览图片"
            class="max-w-full max-h-[calc(90vh-60px)] object-contain"
          >
          
          <!-- 视频预览 -->
          <video
            v-else-if="file.type === 'video' && file.url"
            :src="file.url"
            controls
            class="max-w-full max-h-[calc(90vh-60px)]"
          >
            您的浏览器不支持视频播放
          </video>
          
          <!-- 文档预览 -->
          <div v-else-if="file.type === 'document'" class="flex flex-col items-center justify-center p-10 text-white">
            <i class="fa" :class="getFileIconClass()" style="font-size: 8rem;"></i>
            <p class="mt-4 text-lg font-medium">{{ file.name }}</p>
            <p class="mt-2 text-gray-400">{{ formatFileSize(file.size * 1024) }}</p>
            <button
              @click="handleDownload"
              class="mt-6 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors"
            >
              <i class="fa fa-download mr-1"></i>
              下载文件
            </button>
          </div>
          
          <!-- 加载中 -->
          <div v-if="loading" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
            <div class="text-white flex flex-col items-center">
              <i class="fa fa-spinner fa-spin text-3xl mb-2"></i>
              <span>加载中...</span>
            </div>
          </div>
        </div>
        
        <!-- 无文件预览 -->
        <div v-else class="text-white text-center">
          <i class="fa fa-file-o text-6xl mb-4 text-gray-600"></i>
          <p>暂无文件可预览</p>
        </div>
      </div>
      
      <!-- 文件信息 -->
      <div v-if="file" class="p-4 bg-gray-800 text-white text-sm">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
          <div>
            <span class="text-gray-400">文件大小：</span>
            <span>{{ formatFileSize(file.size * 1024) }}</span>
          </div>
          <div>
            <span class="text-gray-400">上传时间：</span>
            <span>{{ formatDate(file.uploadTime) }}</span>
          </div>
          <div>
            <span class="text-gray-400">文件分类：</span>
            <span>{{ getCategoryName(file.category) }}</span>
          </div>
        </div>
        <div v-if="file.description" class="mt-2">
          <span class="text-gray-400">文件说明：</span>
          <span>{{ file.description }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  file: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['close'])

// 状态管理
const loading = ref(false)

// 监听文件变化
watch(() => props.file, (newFile) => {
  if (newFile && props.visible) {
    // 模拟加载过程
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
})

// 处理关闭
const handleClose = () => {
  emit('close')
}

// 处理下载
const handleDownload = () => {
  if (!props.file) return
  
  // 这里模拟下载，实际项目中应该调用后端API
  alert(`开始下载文件：${props.file.name}`)
}

// 获取文件图标类名
const getFileIconClass = () => {
  if (!props.file) return ''
  
  if (props.file.type === 'document') {
    const name = props.file.name.toLowerCase()
    if (name.endsWith('.pdf')) return 'fa-file-pdf-o text-red-500'
    if (name.endsWith('.doc') || name.endsWith('.docx')) return 'fa-file-word-o text-blue-400'
    if (name.endsWith('.xls') || name.endsWith('.xlsx')) return 'fa-file-excel-o text-green-400'
    if (name.endsWith('.ppt') || name.endsWith('.pptx')) return 'fa-file-powerpoint-o text-orange-400'
    return 'fa-file-text-o text-gray-400'
  }
  
  if (props.file.type === 'image') return 'fa-file-image-o text-green-400'
  if (props.file.type === 'video') return 'fa-file-video-o text-blue-400'
  
  return 'fa-file-o text-gray-400'
}

// 格式化文件大小
const formatFileSize = (sizeBytes) => {
  if (sizeBytes >= 1024 * 1024) {
    return (sizeBytes / (1024 * 1024)).toFixed(2) + ' MB'
  } else if (sizeBytes >= 1024) {
    return (sizeBytes / 1024).toFixed(2) + ' KB'
  }
  return sizeBytes + ' B'
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取分类名称
const getCategoryName = (category) => {
  if (!category) return ''
  
  const categoryMap = {
    'banner': '轮播图',
    'product': '产品图片',
    'article': '文章配图',
    'avatar': '头像',
    'other': '其他'
  }
  
  return categoryMap[category] || category
}
</script>

<style scoped>
/* 预览动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.3s ease;
}

/* 图片预览容器 */
img {
  transition: all 0.3s ease;
}

/* 视频控件样式 */
video {
  background-color: #000;
  border-radius: 4px;
}
</style>